<template>
  <div class="command-category">
    <div class="search-box">
      <div class="search-input-container">
        <input type="text" placeholder="搜索指令或分类..." v-model="searchText" />
        <button class="search-btn" @click="performSearch">🔍</button>
      </div>
    </div>
    <div class="category-dropdown">
      <button class="dropdown-toggle" @click="toggleDropdown">
        {{ selectedCategoryName }} ▼
      </button>
      <ul v-if="isDropdownOpen" class="dropdown-menu">
        <li
          v-for="category in filteredCategories"
          :key="category.id"
          :class="{ 'active': selectedCategory === category.id }"
          @click="onCategoryClick(category.id)"
        >
          {{ category.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from 'vue';

// 定义props
interface Category {
  id: string;
  name: string;
}

interface Command {
  id: number;
  name: string;
  type: string;
  content: string;
  hasParameter?: boolean;
  parameter?: string;
}

const props = defineProps<{
  categories: Category[];
  commands: Command[];
}>();

// 定义emits
const emit = defineEmits<{
  (e: 'category-change', categoryId: string): void;
  (e: 'search-change', searchText: string): void;
}>();

// 状态管理
const searchText = ref('');
const selectedCategory = ref('all');
const isDropdownOpen = ref(false);

// 计算属性：过滤后的分类
const filteredCategories = computed<Category[]>(() => {
  // 当搜索框为空时，显示所有分类
  if (!searchText.value.trim()) {
    return props.categories;
  }

  // 搜索文本不为空时，同时搜索分类和指令
  const searchLower = searchText.value.toLowerCase();
  const matchedCategories = new Set<string>();

  // 搜索分类
  props.categories.forEach(category => {
    if (category.name.toLowerCase().includes(searchLower)) {
      matchedCategories.add(category.id);
    }
  });

  // 搜索指令，如果指令匹配，则添加其分类到结果集
  props.commands.forEach(command => {
    if (command.name.toLowerCase().includes(searchLower) || 
        command.content.toLowerCase().includes(searchLower)) {
      matchedCategories.add(command.type);
    }
  });

  // 确保'全部指令'选项始终在结果中
  matchedCategories.add('all');

  // 返回匹配的分类
  return props.categories.filter(category =>
    matchedCategories.has(category.id)
  );
});

// 计算属性：当前选中分类的名称
const selectedCategoryName = computed<string>(() => {
  const category = props.categories.find(cat => cat.id === selectedCategory.value);
  return category ? category.name : '全部指令';
});

// 方法：处理分类点击
const onCategoryClick = (categoryId: string) => {
  selectedCategory.value = categoryId;
  emit('category-change', categoryId);
  isDropdownOpen.value = false;
};

// 方法：切换下拉菜单
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
};

// 方法：执行搜索
const performSearch = () => {
  emit('search-change', searchText.value);
};
</script>

<style scoped>
.command-category {
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.search-box {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.search-input-container {
  display: flex;
  width: 100%;
  height: 28px;
}

.search-input-container input {
  flex: 1;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
  font-size: 14px;
}

.search-btn {
  padding: 6px 8px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-dropdown {
  padding: 8px;
}

.dropdown-toggle {
  width: 100%;
  padding: 6px 8px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  height: 28px;
}

.dropdown-menu {
  list-style: none;
  padding: 3px 0;
  margin: 3px 0 0 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-height: 250px;
  overflow-y: auto;
  font-size: 14px;
}

.dropdown-menu li {
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-menu li:hover {
  background-color: #e9e9e9;
}

.dropdown-menu li.active {
  background-color: #d4e7fc;
  color: #4285f4;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .command-category {
    width: 150px;
  }
}

@media (max-width: 480px) {
  .command-category {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
  }

  li {
    padding: 8px 12px;
    margin: 2px;
    border: 1px solid #eee;
    border-radius: 4px;
    flex: 0 0 auto;
  }
}
</style>